<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-商品评价页面</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="register-bar collect-bar" style="padding-bottom: 0;">
    <div class="header-box pos-abs-tl">
        <div class="header-goBack">
            <a class="go-back-btn sprite-icon" id="forgetGoBack" href="#"></a>
        </div>
        商品评价
        <a class="intro-collectBtn evaluate-collect" href="#" id="collectBtn"><i class="shop-sprite-icon"></i></a>
        <a class="intro-moreBtn settingMenu" href="#"><i class="sprite-icon"></i></a>
    </div>

    <div class="setting-menu pos-abs-tr">
        <span class="arrow-top"></span>
        <a href="#"><i class="sprite-icon index-icon"></i>首页</a>
        <a href="#"><i class="sprite-icon shop-icon"></i>商品分类</a>
        <a href="#"><i class="sprite-icon car-icon"></i>购物车<span>10</span></a>
        <a href="#"><i class="sprite-icon goods-icon"></i>实物订单</a>
        <a href="#"><i class="sprite-icon mine-icon"></i>我的</a>
    </div>
    <div class="collect-cont">
        <div id="wrapper">
            <div id="scroller">
                <div class="refund-box orderIntro-box pad-b10">
                    <div class="collect-list shopCar-list order-page-list padding-10 no-padding">
                        <div class="evaluate-taps clearfix">
                            <a class="active" href="javascript:;">全部评价（2.1万）</a>
                            <a href="javascript:;">有图（3655）</a>
                            <a href="javascript:;">好评（1551）</a>
                            <a href="javascript:;">中评（2.5万）</a>
                            <a href="javascript:;">差评（5）</a>
                        </div>
                        <ul>
                            <li>
                                <div class="collect-intro no-padding">
                                    <div class="evaluate-intro">
                                        <label class="evaluate-portrait"><img src="img/personal-img.jpg"></label>
                                        <span class="evaluate-username">jsh-轩轩TA爹爹-8969</span>
                                        <span class="evaluate-time">2017-01-12 16:10</span>
                                    </div>
                                    <div class="evaluate-score mar-b5">
                                        <label class="score clearfix">
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class=""></i>
                                            <i class=""></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="evaluate-content mar-b10">
                                    <span>快递给力，口感好，嚼劲十足。好吃太多了，特棒，都是我喜
                                        东西确实相差多，总体感觉。快递给力，口感好，嚼劲十足。好吃太多了，特棒，都是我喜
                                        东西确实相差多，总体感觉太棒了！好多各种的小零食，还有
                                        贝，包装很好。</span>
                                </div>
                                <div class="evaluate-img list-row none-space mar-b10">
                                    <ul class="clearfix imgBasicCls">
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/shopType-icon.png"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/change-icon.png"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/sprite-icon.png"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/personalcenter-icon.png"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="evaluate-praise">
                                    <a href="javascript:;"><i class="change-sprite-icon active"></i><span>(1236)</span></a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro no-padding">
                                    <div class="evaluate-intro">
                                        <label class="evaluate-portrait"><img src="img/personal-img.jpg"></label>
                                        <span class="evaluate-username">jsh-轩轩TA爹爹-8969</span>
                                        <span class="evaluate-time">2017-01-12 16:10</span>
                                    </div>
                                    <div class="evaluate-score mar-b5">
                                        <label class="score clearfix">
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class=""></i>
                                            <i class=""></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="evaluate-content mar-b10">
                                    <span>快递给力，口感好，嚼劲十足。好吃太多了，特棒，都是我喜
                                        东西确实相差多，总体感觉太棒了！好多各种的小零食</span>
                                </div>
                                <div class="evaluate-praise">
                                    <a href="javascript:;"><i class="change-sprite-icon"></i><span>(1236)</span></a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro no-padding">
                                    <div class="evaluate-intro">
                                        <label class="evaluate-portrait"><img src="img/personal-img.jpg"></label>
                                        <span class="evaluate-username">jsh-轩轩TA爹爹-8969</span>
                                        <span class="evaluate-time">2017-01-12 16:10</span>
                                    </div>
                                    <div class="evaluate-score mar-b5">
                                        <label class="score clearfix">
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class=""></i>
                                            <i class=""></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="evaluate-content mar-b10">
                                    <span>快递给力，口感好</span>
                                </div>
                                <div class="evaluate-img list-row none-space mar-b10">
                                    <ul class="clearfix imgBasicCls">
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/limit-img3.jpg"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/product-img2.jpg"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/specialImg/tackit-bg-1212.png"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                        <li class="upload-box">
                                            <a href="javascript:;">
                                                <img class="lazy" data-original="img/banner2.png"
                                                     src="img/product-default.jpg">
                                                <i class="sprite-icon close-icon"></i>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="evaluate-praise">
                                    <a href="javascript:;"><i class="change-sprite-icon"></i><span>(1236)</span></a>
                                </div>
                            </li>
                            <li>
                                <div class="collect-intro no-padding">
                                    <div class="evaluate-intro">
                                        <label class="evaluate-portrait"><img src="img/personal-img.jpg"></label>
                                        <span class="evaluate-username">jsh-轩轩TA爹爹-8969</span>
                                        <span class="evaluate-time">2017-01-12 16:10</span>
                                    </div>
                                    <div class="evaluate-score mar-b5">
                                        <label class="score clearfix">
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class="active"></i>
                                            <i class=""></i>
                                            <i class=""></i>
                                        </label>
                                    </div>
                                </div>
                                <div class="evaluate-content mar-b10">
                                    <span>总体感觉太棒了！好多各种的小零食</span>
                                </div>
                                <div class="evaluate-praise">
                                    <a href="javascript:;"><i class="change-sprite-icon"></i><span>(1236)</span></a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!--显示-->
    <div id="imgBigBox" class="showImgBig forget-type animated-left top-0" style="padding-top: 0;">
        <div class="header-box pos-abs-tl background-000000" style="display: block;">
            <div class="header-goBack" id="hideBigBox">
                <a class="go-back-btn sprite-icon" href="#"></a>
            </div>
            <span id="productImgNumber">1/2</span>

            <div class="header-more-btn settingMenu"><span class="has-icon sprite-icon"></span></div>
        </div>

        <div class="swiper-container showProductImg-list">
            <div class="swiper-wrapper"></div>
        </div>
        <div class="product-evaluate" style="display: none;">
            <p class="text-clamp-overflow"></p>
            <a href="javascript:;"><i class="change-sprite-icon"></i></a>
        </div>
    </div>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/swiper.jquery.min.js"></script>
<script src="js/jquery.lazyload.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/box.js"></script>
<script src="js/public.js"></script>
<script src="js/area.js"></script>
<script>
    $(function () {
        var myScroll = publicFuns.newIScrollRefresh("#wrapper", null, null, 0, true);
        var mySwiper = publicFuns.newSwiper(".checkShop-swiper", 3);

        //收藏
        $("#collectBtn").click(function () {
            $(this).toggleClass("active");
            if ($(this).hasClass("active")) {
                $.jAlert("收藏成功", "", "", "");
            } else {
                $.jAlert("取消收藏成功", "", "", "");
            }
        });

        //设置图片的大小
        $(window).resize(function () {
            var w_w = $(this).width() - 20 - 39;
            var cell_w = w_w / 4;
            $(".evaluate-img").find("li.upload-box,a").css({"width": cell_w + "px", "height": cell_w + "px"});
        }).trigger("resize");
        //显示菜单
        $(".settingMenu").click(function () {
            console.log(0);
            $(".setting-menu").fadeToggle();
            $(this).toggleClass("active")
        });

        //选择评价
        $(".evaluate-taps a").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
            myScroll.refresh();
        });

        //浏览评价图片
        var smallBox = $(".upload-box");
        var bigBox = $("#imgBigBox");
        var backBtn = $("#hideBigBox");
        var imgNumber = $("#productImgNumber");
        var _html = "", _height = window.innerHeight;
        var imgSwiper = "";
        var _isClick_ = false;
        smallBox.click(function () {
            if (_isClick_) return false;
            _isClick_ = true;
            $(".setting-menu").fadeOut();
            var $dom = $(this).parents(".imgBasicCls");
            var num = $dom.find("li").length;
            var index = $(this).index();
            var text_dom = bigBox.find(".product-evaluate");
            var text = $dom.parents(".evaluate-img").prevAll(".evaluate-content").text();
            bigBox.addClass("active");
            imgNumber.text("" + (index + 1) + "/" + num + "");
            for (var i = 0; i < num; i++) {
                var that = $dom.find(".upload-box").eq(i);
                var img = that.find("img");
                var src = img.attr("src");
                var _w = img.width();
                var _h = img.height();
                _html += '<div class="swiper-slide" style="height: ' + _height + 'px">' +
                '<img style="width:' + countImgSize(_w, _h).w + 'px; height:' + countImgSize(_w, _h).h + 'px; margin:-' + (countImgSize(_w, _h).h / 2) + 'px 0 0 -' + (countImgSize(_w, _h).w / 2) + 'px;" src="' + src + '"></div>';
            }
            text_dom.find("p").text(text);
            (text_dom.height() - 30) >= 41 ? $(".product-evaluate a").show() : $(".product-evaluate a").hide();
            var text_h = (text_dom.height() - 30) >= 41 ? 40 : (text_dom.height()+10);
            text_dom.find("p").data("height", text_dom.height() - 30).height(text_h);
            bigBox.addClass("active").find(".swiper-wrapper").append(_html);
            imgSwiper = new Swiper("#imgBigBox .showProductImg-list", {
                loop: false,
                initialSlide: index,
                height: window.innerHeight,
                onSlideNextStart: function (swiper) {
                    swiper.update(true);
                    imgNumber.text("" + (swiper.activeIndex + 1) + "/" + bigBox.find(".swiper-slide").length + "");
                },
                onSlidePrevStart: function (swiper) {
                    swiper.update(true);
                    imgNumber.text("" + (swiper.activeIndex + 1) + "/" + bigBox.find(".swiper-slide").length + "");
                }
            });
            imgSwiper.on("click", function () {
                $(".setting-menu").fadeOut();
                $(".product-evaluate").fadeToggle();
                //$(".header-box.background-000000").fadeToggle();
            });
        });
        backBtn.click(function () {
            _isClick_=false;
            $(".setting-menu").fadeOut();
            $(".product-evaluate").fadeOut();
            //$(".header-box.background-000000").fadeOut();
            _html = "";
            bigBox.find(".product-evaluate a").removeClass("active");
            bigBox.find(".product-evaluate p").text("").removeData("height").removeAttr("style");
            bigBox.removeClass("active").find(".swiper-wrapper").empty();
            imgSwiper.update(true);
            imgSwiper.destroy(false, true);
        });

        var countImgSize = function (w, h) {
            var _size = {};
            var _w = $(window).width();
            var _h = $(window).height();
            var __w, __h;
            if (w >= h) {
                __w = _w;
                __h = _w / (w / h);
                if (__h > _h) {
                    __h = _h;
                    __w = __h * (w / h);
                }
            } else if (w < h) {
                __h = _h;
                __w = _h * (w / h);
                if (__w > _w) {
                    __w = _w;
                    __h = _w / (w / h);
                }
            }

            _size.w = __w;
            _size.h = __h;
            return _size;
        };

        $(".evaluate-praise").find("a").click(function () {
            if ($(this).find("i").hasClass("active")) return false;
            $(this).find("i").addClass("active");
            var span = $(this).find("span");
            var num = parseInt(span.text().split("(")[1]);
            span.text("(" + (num + 1) + ")").addClass("active");
        });
        $(".product-evaluate").find("a").click(function () {
            $(this).toggleClass("active");
            var p = $(this).prev("p");
            var h = p.data("height");
            console.log(h);
            if (h <= 40) return false;
            if ($(this).hasClass("active")) {
                p.removeClass("text-clamp-overflow");
                p.animate({"height": h + "px"}, 300);
            } else {
                p.animate({"height": "40px"}, 300, function () {
                    p.addClass("text-clamp-overflow");
                });
            }
        });
    });
</script>
</body>
</html>